import Transaction from "https://cdn.jsdelivr.net/npm/@konghayao/promise-transaction/dist/promiseTransaction.browser.js";
import addAnime from "../plugins/Anime.js";

export default new Transaction([
    [
        "load resource",
        () =>
            window.assetsLoader({
                background: {
                    Light: [
                        "./image/background/bg-w-0.webp",
                        "./image/background/bg-w-1.webp",
                        "./image/background/bg-w-2.webp",
                    ],
                    Dark: [
                        "./image/background/bg-b-0.webp",
                        "./image/background/bg-b-1.webp",
                        "./image/background/bg-b-2.webp",
                    ],
                },
            }),
    ],
    [
        "createElement",
        () => {
            let sprite = new PIXI.AnimatedSprite(Resources["background"]);
            sprite.height = app.config.height;
            sprite.width = app.config.width;
            sprite.changeStates("Light");
            sprite.animationSpeed = 0.05;
            sprite.zIndex = -100;
            addAnime(sprite);
            sprite.play();
            window.background = sprite;
            window.app.stage.addChild(sprite);
            return sprite;
        },
    ],
    [
        "attachEvents",
        (_, last) => {
            last.ChangeDarkAndLight = function () {
                const isLight = this.State === "Light";
                app.renderer.backgroundColor = isLight ? 0x000000 : 0xffffff;
                const duration = 1000;
                FontAnime(isLight);
                FlowerAnime(duration);
                const Sound = ["Frog", "Bird"];
                const [silent, play] = isLight ? Sound.reverse() : Sound;
                Music[silent].stop();
                return this.anime({
                    alpha: 0,
                    duration,
                }).then(() => {
                    this.changeStates(isLight ? "Dark" : "Light").play();
                    Music[play].play();
                    return new Promise((resolve) => {
                        setTimeout(() => {
                            this.anime({
                                alpha: 1,
                                duration,
                            }).then(() => resolve());
                        }, 200);
                    });
                });
            };
        },
    ],
]);
function FlowerAnime(duration) {
    anime
        .timeline({
            targets: app.stage.Flower,
        })
        .add({
            alpha: 0,
            duration,
        })
        .add({ alpha: 1 });
}

function FontAnime(isLight) {
    const style = {
        fontFamily: "DOUYU Font",
        fontSize: 48 * px,
        fill: isLight ? "white" : "black",
    };
    const message = new PIXI.Text(
        `第 ${
            Record.nowState.day + Record.stack.day + Record.nowState.step
        } 天`,
        style
    );
    message.x = -100 * px;
    message.y = 80 * px;
    message.anchor.set(0.5, 0.5);
    anime({
        targets: message,
        x: [-100 * px, app.config.width / 2, 800 * px],

        duration: 4000,
        complete: () => {
            app.stage.removeChild(message);
        },
    });
    app.stage.addChild(message);
}
